<template>
    <div class="content"
         :class="{'global_content':$store.state.nowTime==='moon'}">
        <i :class="{'bubbles':bubbles}" style="--d:1s; --i: 10rem;--k: 12"></i>
        <i :class="{'bubbles':bubbles}" style="--d:3s; --i: 100rem;--k: 24"></i>
        <i :class="{'bubbles':bubbles}" style="--d:6s; --i: 20rem;--k: 10"></i>
        <i :class="{'bubbles':bubbles}" style="--d:6s; --i: 12rem;--k: 16"></i>
        <i :class="{'bubbles':bubbles}" style="--d:4s; --i: 23rem;--k: 32"></i>
        <i :class="{'bubbles':bubbles}" style="--d:4s; --i:15rem; --k: 20"></i>
        <i :class="{'bubbles':bubbles}" style="--d:1s ; --i: 23rem;--k: 12"></i>
        <i :class="{'bubbles':bubbles}" style="--d:1s; --i: 12rem;--k: 24"></i>
        <i :class="{'bubbles':bubbles}" style="--d:1s ; --i: 30rem;--k: 10"></i>
        <i :class="{'bubbles':bubbles}" style="--d:4s; --i: 50rem;--k: 16"></i>
        <i :class="{'bubbles':bubbles}" style="--d:5s; --i: 60rem;--k: 32"></i>
        <i :class="{'bubbles':bubbles}" style="--d:2s; --i:70rem; --k: 20"></i>
        <i :class="{'bubbles':bubbles}" style="--d:2s; --i: 56rem;--k: 12"></i>
        <i :class="{'bubbles':bubbles}" style="--d:8s; --i: 19rem;--k: 24"></i>
        <i :class="{'bubbles':bubbles}" style="--d:8s; --i: 75rem;--k: 10"></i>
        <i :class="{'bubbles':bubbles}" style="--d:7s; --i: 60rem;--k: 16"></i>
        <i :class="{'bubbles':bubbles}" style="--d:6s; --i: 30rem;--k: 32"></i>
        <i :class="{'bubbles':bubbles}" style="--d:5s; --i:95rem; --k: 20"></i>
        <i :class="{'bubbles':bubbles}" style="--d:10s; --i: 35rem;--k: 16"></i>
        <i :class="{'bubbles':bubbles}" style="--d:11s; --i: 50rem;--k: 32"></i>
        <i :class="{'bubbles':bubbles}" style="--d:12s; --i:62rem; --k: 20"></i>
        <i :class="{'bubbles':bubbles}" style="--d:10s; --i: 56rem;--k: 12"></i>
        <i :class="{'bubbles':bubbles}" style="--d:11s; --i: 34rem;--k: 24"></i>
        <i :class="{'bubbles':bubbles}" style="--d:10s; --i: 43rem;--k: 10"></i>
        <i :class="{'bubbles':bubbles}" style="--d:11s; --i: 30rem;--k: 16"></i>
        <i :class="{'bubbles':bubbles}" style="--d:12s; --i: 23rem;--k: 32"></i>
        <i :class="{'bubbles':bubbles}" style="--d:10s; --i:10rem; --k: 20"></i>
        <div class="head">
            <HeadNavigationBar></HeadNavigationBar>
        </div>
        <router-view></router-view>
        <PromptInformation :style="{'display':info!=='' ? 'flex':'none'}">{{ info }}</PromptInformation>

    </div>

    <MessagePopUp></MessagePopUp>
    <DataLoading></DataLoading>

    <Sun style="bottom:8%; left: 2%"></Sun>
    <SignIn v-if="$store.state.signIn"></SignIn>
    <SiteInformation
            v-show="!$store.state.loginStatue"
            :site_info="site_info"
            :class="{'global_footer':$store.state.nowTime==='moon'}"
    >
    </SiteInformation>
</template>

<script>
import SiteInformation from '@/components/PublicComponents/SiteInformation.vue'
import HeadNavigationBar from '@/components/navigationBar/HeadNavigationBar.vue'
import ContentDisplay from '@/components/PublicComponents/ContentDisplay-ul.vue'
import FireflyLightEffect from '@/components/PublicComponents/FireflyLightEffect.vue'
import Login from '@/components/signUpAndLogIn/Login.vue'
import PromptInformation from '@/components/PublicComponents/PromptInformation.vue'
import DataLoading from '@/components/PublicComponents/DataLoading.vue'
import Sun from '@/components/PublicComponents/Sun.vue'
import BodyContent from '@/components/home/BodyContent.vue'
import SignIn from '@/components/PublicComponents/SignIn.vue'
import BulletinBoard from '@/components/home/BulletinBoard.vue'
import MessagePopUp from '@/components/PublicComponents/MessagePopUp.vue'

export default {
    name: 'App',
    components: {
        MessagePopUp,
        BulletinBoard,
        SignIn,
        BodyContent,
        Sun,
        DataLoading,
        PromptInformation,
        Login,
        SiteInformation,
        FireflyLightEffect,
        ContentDisplay,
        HeadNavigationBar,
    },
    data() {
        return {
            site_info: '',
            bubbles: false,
            info: '',
            index_info: true,
        }
    },
    mounted() {
        console.log('Gite地址：https://gitee.com/liyaozhonghaoshuai/blog')
        console.log(
            '%c🍁 作者：不想说话而已 | 博客网址：https://blog.lyzhnb.top 🍁',
            'color:#fff; background: linear-gradient(270deg, #EEC9A3, #EF629F,  rgba(137, 231, 243,.8)); padding: 8px 15px; border-radius: 8px'
        )

        this.siteInfo()
    },
    methods: {
        async siteInfo() {
            let writing = [{options: '', content: ''}]
            writing = JSON.parse(window.localStorage.getItem('DataContent'))
            if (writing) {
                this.site_info = writing[9].content.split('|||||')
            }
            let ts = window.localStorage.getItem('nowTime')
            if (ts !== '') {
                this.$store.commit('nowTimeStatue', ts)
            }
        },

        // infos(str) {
        //     this.info = "";
        //     this.info = str;
        //     if (this.index_info) {
        //         this.index_info = false;
        //         this.pas = !this.pas;
        //         clearInterval(this.time_info);
        //         this.time_info = setInterval(() => {
        //             this.info = "";
        //             this.index_info = true;
        //         }, 4000)
        //     }
        // },

    },
}
</script>

<style scoped lang="scss">
* {
  margin: 0 !important;
  padding: 0 !important;
}

.animation {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
}

li {
  position: relative;
  min-height: 60px;
  margin-bottom: 8px;
}

::-webkit-scrollbar-button {
  display: none !important;
  height: 0;
}

.head {
  position: absolute;
  top: 0;
  z-index: 999999;

  html {
    overflow: auto !important;

    .content {
      transition: all 1s;
      background: linear-gradient(
                      to right,
                      rgba(245, 241, 243) 0%,
                      rgba(255, 252, 220, 0.68) 100%
      );

      i {
        display: none;
        position: absolute;

        .bubbles {
          z-index: 0;
          display: block;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 2px solid #e5b3b3;
          box-shadow: inset 0 0 10px #fff;
          animation: anim 15s linear infinite;

          i:nth-child(n) {
            left: var(--i);
            animation-duration: calc(3s * var(--k));
            animation-delay: var(--d);

            @keyframes anim {
              0% {
                display: block;
                bottom: 0;
                transform: translateX(0);
              }
              50% {
                bottom: 50%;
                transform: translateX(100px);
                z-index: 999;
              }
              100% {
                bottom: 110%;
                transform: translateX(0);
              }
            }
          }
        }
      }
    }
  }
}
</style>
